<template>
  <div class="dynamic-input-group">
    <!-- 添加按钮 -->
    <el-button
      v-if="isAdd"
      type="primary"
      @click="addInput"
      icon="el-icon-plus"
      class="add-btn"
      size="small"
    >
      {{ buttonText }}
    </el-button>

    <!-- 输入框列表 -->
    <div v-for="(item, index) in inputs" :key="item.id" class="input-row">
      <!-- 单列模式 -->
      <template v-if="mode === 'single'">
        <el-input
          v-model="item.value"
          :placeholder="placeholder || `请输入`"
          class="input-field"
        />
      </template>

      <!-- 双列模式 -->
      <template v-else>
        <slot name="label1" />
        <el-input
          v-model="item.value1"
          :placeholder="placeholder1 || `请输入${index + 1}-1`"
          class="input-field double"
        />
        <slot name="label2" />
        <el-input
          v-model="item.value2"
          :placeholder="placeholder2 || `请输入${index + 1}-2`"
          class="input-field double"
        />
      </template>

      <el-button
        type="danger"
        icon="el-icon-delete"
        circle
        @click="removeInput(index)"
        class="remove-btn"
        size="mini"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "DynamicInputGroup",
  props: {
    mode: {
      type: String,
      default: "single", // 'single' 或 'double'
      validator: (val) => ["single", "double"].includes(val),
    },
    value: {
      type: Array,
      default: () => [],
    },
    buttonText: {
      type: String,
      default: "添加输入框",
    },
    isAdd: {
      type: Boolean,
      default: true,
    },
    placeholder: String,
    placeholder1: String,
    placeholder2: String,
  },
  data() {
    return {
      inputs: [],
    };
  },
  watch: {
    value: {
      immediate: true,
      handler(newVal) {
        if (JSON.stringify(this.inputs) !== JSON.stringify(newVal)) {
          this.inputs = (newVal || []).map((item, idx) => ({
            ...item,
            id: item.id || this.generateId(idx),
          }));
        }
      },
    },
    inputs: {
      deep: true,
      handler() {
        this.emitChange();
      },
    },
  },
  methods: {
    generateId(index) {
      return `${Date.now()}-${index}`;
    },
    addInput() {
      const newItem =
        this.mode === "single"
          ? { id: this.generateId(this.inputs.length), value: "" }
          : {
              id: this.generateId(this.inputs.length),
              value1: "",
              value2: "",
            };

      this.inputs = [...this.inputs, newItem];

      // 自动聚焦到新输入框
      this.$nextTick(() => {
        const inputs = this.$el.querySelectorAll(".input-field");
        if (inputs.length > 0) {
          inputs[inputs.length - 1].focus();
        }
      });
    },
    removeInput(index) {
      this.inputs = this.inputs.filter((_, i) => i !== index);
    },
    emitChange() {
      this.$emit("input", this.inputs);
      this.$emit("change", this.inputs);
    },
    // 获取当前所有输入值
    getValues() {
      return this.inputs.map((item) => {
        return this.mode === "single"
          ? { value: item.value }
          : { value1: item.value1, value2: item.value2 };
      });
    },
    // 清空所有输入
    clearAll() {
      this.inputs = [];
    },
  },
};
</script>

<style lang="scss" scoped>
.dynamic-input-group {
  width: 100%;

  .add-btn {
    margin-bottom: 15px;
    width: 80px;
  }

  .input-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 8px;
    background: #f8f8f8;
    border-radius: 4px;
    transition: all 0.3s ease;

    &:hover {
      background: #f0f0f0;
    }

    .input-field {
      width: 450px !important;
      // flex: 1;
      margin-right: 10px;

      &.double {
        // flex: 0 0 calc(50% - 8px);
      }
    }

    .remove-btn {
      flex-shrink: 0;
      transition: transform 0.2s;

      &:hover {
        transform: scale(1.1);
      }
    }
  }
}
</style>
